<template>
  <div class="">
    <Header></Header>
    <div class="main">
      <div class="body">
        <div class="add_vip_img"></div>
        <div class="add_vip_view between">
          <div class="add_vip_left">
            <div class="add_vip_title">Права членов</div>
            <div class="mTop20 between">
              <div v-for="item in 3" class="mRight16">
                <div class="add_vip_price center">19.9</div>
                <div class="add_vip_time center">
                  <div style="width: 62px;">Месячная карта</div>
                </div>
              </div>
            </div>
          </div>
          <div class="add_vip_right center cFF">Немедленная оплата</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="cart" setup>
import {ref, reactive} from "vue";

let radio = ref(false)
let indexOf = ref(0)
let tagList = reactive([
  {
    name: 'Ткань',
  },
  {
    name: 'Без скольжения',
  },
  {
    name: 'Очистить',
  }
])

function handleChange() {

}

</script>
<script lang="ts">
import Header from '@/components/Header/Header.vue';//引入的头部的主键
import Tags from '@/components/Tags/Tags.vue';//引入的tags的主键
import Shopping_list from '@/components/Shopping_list/Shopping_list.vue';//引入的商品列表的主键
import Product_list from '@/components/Product_list/Product_list.vue';//引入的商品列表的主键

export default {
  name: 'Login',
  components: {
    Header,
    Shopping_list,
    Tags,
    Product_list
  }
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F6F6F6;

  .body {
    width: 1400px;

    .add_vip_img {
      width: 1400px;
      height: 600px;
      background: #D9D9D9;
      margin: 16px 0;
    }

    .add_vip_view {
      width: 1320px;
      height: 106px;
      padding: 40px;
      border-radius: 16px;
      background: #FFFFFF;

      .add_vip_left {

        .add_vip_title {
          font-family: Microsoft YaHei UI;
          font-size: 16px;
          font-weight: 400;
          line-height: 16px;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
        }

        .add_vip_price {
          width: 90px;
          height: 42px;
          background: #FAF8EC;
          font-family: PingFang SC;
          font-size: 20px;
          font-weight: 400;
          line-height: 20px;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          border-radius: 4px 4px 0 0;
        }

        .add_vip_time {
          width: 90px;
          height: 28px;
          background: #E3C7AE;
          font-family: PingFang SC;
          font-size: 10px;
          font-weight: 400;
          line-height: 10px;
          text-align: center;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          border-radius: 0 0 4px 4px;
        }
      }

      .add_vip_right {
        width: 300px;
        height: 60px;
        border-radius: 8px;
        background: #0070E9;
        font-family: PingFang SC;
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
      }
    }
  }
}
</style>
